<template>
  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      <a-button type="primary" @click="add">添加</a-button>
      <a-table :dataSource="specificationList"
               :columns="columns"
               :pagination="pagination"
               :loading="Loading"
               @change="handleTableChange"
      >
        <template v-slot:action="{text,record}">
          <a-button type="primary" @click="edit(record)">编辑</a-button>
          <a-popconfirm
              title="删除后无法恢复，确认删除?"
              ok-text="是"
              cancel-text="否"
              @confirm="del(record.id)"
          >
            <a-button type="danger">删除</a-button>
          </a-popconfirm>

        </template>
      </a-table>
    </a-layout-content>
  </a-layout>
  <a-modal v-model:visible="modelVisible"
           title="规格编辑表单"
           cancel-text="取消"
           ok-text="确定"
           @ok="handleModelOk">
    <a-form
        :model="tbSpecification"
        :label-col="{ span: 6 }"
        :wrapper-col="wrapperCol"
    >

      <a-form-item label="规格名称">
        <a-input v-model:value="tbSpecification.specification.specName" />
      </a-form-item>

      <a-form-item label="规格选项">
        <a-button type="primary"  @click="addTableRow">新增规格选项</a-button>
        <table id="tb01" width="340px" >
          <thead>
          <tr>
            <td>规格选项</td>
            <td>排序</td>
            <td>操作</td>
          </tr>
          </thead>
          <tbody>
          <tr v-for="pojo,index in tbSpecification.specificationOptions" v-bind:key="pojo.id">
            <td><a-input v-model:value="pojo.optionName"/></td>
            <td><a-input v-model:value="pojo.orders"/></td>
            <td><a-button  danger block @click="delTableRow(index)">删除</a-button></td>
          </tr>
          </tbody>
        </table>
      </a-form-item>

    </a-form>
  </a-modal>
</template>

<script lang="ts">
import{ref,onMounted} from "vue";
import axios from "axios";
import {Tool} from "@/util/tool";
import {message} from "ant-design-vue";
export default {
  name: "admin-specification",

  setup(){
    const specificationList = ref();
    const Loading=ref<boolean>(false);
    const modelVisible=ref<boolean>(false);
    const tbSpecification=ref<any>({
      specification:{
      },
      specificationOptions:[]
    });
    const pagination=ref({
      current:1,
      pageSize:5,
      total:0
    });


    const columns = [
      {
        title: '规格ID',
        dataIndex: 'id',
        key: 'id',
        width:750
      },
      {
        title: '规格名称',
        dataIndex: 'specName',
        key: 'specName',
        width:750
      },
      {
        title: '操作',
        key: 'action',
        slots:{customRender:'action'},
        width:300
      }
    ];

    const handleQuerySpecList = (params:any) => {
      Loading.value=true;
      axios.get('/mall-manager/specification-Ms/specificationListByPage',{
        params:{
          page:params.page,
          size:params.size
        }
      }).then((response)=>{
        Loading.value=false;
        specificationList.value=response.data.list;

        //重置分页按钮
        pagination.value.current =params.page
        pagination.value.total=response.data.total
      })
    }

    const addTableRow = () => {
      tbSpecification.value.specificationOptions.push({});
    }

    const delTableRow = (index:number) => {
      tbSpecification.value.specificationOptions.splice(index,1);
    }

    const handleTableChange=(pagination:any)=>{
      handleQuerySpecList({
        page:pagination.current,
        size:pagination.pageSize
      })
    }

    const handleModelOk = () => {
      axios.post('/mall-manager/specification-Ms/saveSpecification',tbSpecification.value).then(response=>{
        if(response.data.code==200){
          modelVisible.value=false;//关闭窗口
          message.info('操作成功');
          //加载最新品牌列表
          handleQuerySpecList({
            page:pagination.value.current,
            size:pagination.value.pageSize
          });
        }else {
          message.info('操作失败');
          message.error(response.data.message);
        }
      })
    }

    const del = (id:number) => {
      axios.delete('/mall-manager/specification-Ms/deleteSpecification/'+id).then(response=>{
        if(response.data.code==200){
          message.info('删除成功');
          //加载最新新闻列表
          handleQuerySpecList({
            page:pagination.value.current,
            size:pagination.value.pageSize
          });
        }else {
          message.error(response.data.message);
        }
      })
    };

    const findSpecById = (id:number) => {
      axios.get('/mall-manager/specification-Ms/findTbSpecificationById/'+id).then(response=>{
        if(response.data.code==200){
          console.log(response.data.data);
          tbSpecification.value=response.data.data;
        }else {
          message.error(response.data.message);
        }
      })
    }

    const edit = (record:any) => {
      console.log(record);
      findSpecById(record.id);
      modelVisible.value=true;
      tbSpecification.value=Tool.copy(tbSpecification.value); //复制对象到编辑模态框
    }

    const add = () => {
      // tbSpecification.value.specification.specName='';
      //初始化品牌对象
      tbSpecification.value={
        specification:{},
        specificationOptions:[]
      };
      console.log(tbSpecification.value.specification.specName);
      modelVisible.value=true;
    }

    onMounted(() => {
      handleQuerySpecList({
        page:1,
        size:pagination.value.pageSize
      })
    });

    return {
      specificationList,
      columns,
      pagination,
      Loading,
      handleTableChange,
      del,
      add,
      modelVisible,
      handleModelOk,
      tbSpecification,
      edit,
      addTableRow,
      delTableRow,


    }

  }
}
</script>

<style scoped>

</style>